Overview

This is a WordPress plugin of the LayerSlider! You can create as many layers and sublayers as you want. You can use unlimited images with links. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

Thank you

Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to email us.

Features

• Use with ANY content you want (images, HTML elements, Flash movies, YouTube videos, etc.)
  (best view with semi-transparent PNG images or CSS3 styled HTML elements)
• Sliding from / to 4 directions or fading in / out (sublayers only)
• Unlimited number of layers / sublayers
• Multiple animations and easing
• Responsive layout
• Automatic slideshow function (optional: Backwards-Slideshow)
• Image preload feature
• Auto-play embedded YouTube and Vimeo videos (configurable)
• Auto-pause slideshow while videos are playing
• Auto-preview images to YouTube and Vimeo videos
• Loops feature
• Customizable UI
• WYSIWYG editor (Real-time dragging, reordering and styling layers and sublayers)
• Now it's easy to add a link which jumps to another layer
• Powerful API with callback functions
• Keyboard navigation
• Touch control for mobile devices (iOS tested)
• yourLogo feature with link option
• Skin support with 5 pre-defined skins
• SEO friendly
• Multiple browser support (IE 7+, Safari 3+, iOS Safari, Chrome 3+, Firefox 3+, Opera 10+)
• Detailed Documentation with examples
• WordPress-free version of the script is also included!

Changelog

2.0.0

• added loops feature
• added autoPlay feature for embedded YouTube and Vimeo videos
• added autoPauseSlideshow feature while videos are playing
• added auto-preview image feature to YouTube and Vimeo videos
• added linkTo feature
• added import / export feature
• you can now easily add an ID to any sublayer
• LayerSlider WP is now parsing shortcodes
• added some GUI improvements
• included two new skins
• touch control now can be disabled
• changed one layer mode (not duplicating it now)
• fixed a wrong variable
• fixed a wrong function in forceResponsive mode
• fixed yourLogo style settings, reset and yourLogoTarget
• fixed global background setting
• fixed saving method
• changed from absolute to relative URLs
• https aware
• fixed a bug when a new image sublayer is reordered
• fixed a bug in forceResponsive mode
• the bottom side of the slider (next to the controls) is now clickable
• a lot of minor bugfixes and improvements

1.8.0

• facelifted admin page for better usage
• added an option to style your LayerSlider container from admin
• added "auto" options by default to slidedirection and slideoutdirection properties of sublayers
• added forceResponsive feature (LayerSlider WP now can "get out" from your wp theme, so it's width can be real responsive now)
• changed back to normal PHP opening tags from short opening tags
• fixed the "create new slider" width bug
• fixed some animations
• reset buttons now real-time modifying backgrounds
• added background-images of layers to preload
• modified some CSS styles
• some parts of the source code rewritten
• added yourLogoLink feature
• added yourLogoTarget feature
• added noskin feature

1.7.0

• fixed fading bug (sublayers now appears if sliding in after fading out)
• fixed preload bug with sublayers with gradient backgrounds
• fixed working delayout of layers (From now, if you add a delayout to a layer, sublayers of that layer will be animating out immediately, but the layer (and the next layer) will be delayed by the delayout time of the current layer. So, you can animate out all sublayers BEFORE the parent layer will begin the animation.)
• fixed imagepreload bug
• added an option to animating the first slide instead of fading in
• the script is now fully responsive! (You can add % instead of pixels to left and top properties of sublayers and width or height properties of LayerSlider container.)
• fixed globalimage bug
• added LayerSlider API Callback functions to WYSIWYG editor
• added yourLogo feature (You can now display your fixed logo above the LayerSlider container.)
• some minor bugfixes and improvements

1.6.0

• now supports any HTML content with CSS styling!
• now sublayers supports fading transition
• added slideoutdirection property to sublayers
• added global background color / background image support
• added a possibility to name and reorder layers
• fixed LayerSlider widget
• fixed '1px gap' bug
• fixed one layer bug
• fixed empty sublayer bug
• fixed swing, linear and easeInOutQuint animations
• fixed hover on pause / stop bug
• fixed wrong directions of animations if navigating by slidebuttons
• fixed durationout property for sublayers
• fixed reordering sublayers

1.5.1

• minor bugfixes

1.5.0

• first release

Requirements

WordPress

• WordPress 3.0+

Browser Support

• Mozilla Firefox 3+
• Google Chrome 10+
• Safari 3+
• iOS Safari
• Opera 10+
• Internet Explorer 7+

Note: in old browsers some animations (for example fading the transparent PNGs) are missing, but the plugin is fully functional.

Installation

1. - Copy the layerslider-wordpress-plugin/LayerSlider folder into your WordPress wp-content/plugins/ folder using your favorite FTP program.

2. - Go to your WordPress "Manage Plugins" page, find the "LayerSlider" in your plugins list and click on activate.

Once the plugin has been activated you will notice a new menu on the side called "LayerSlider" enabling you to manage the options for the plugin.

3. - It is important to create a folder named uploads with write permissions in wp-content - if you didn't have it already.

Usage

Creating new slider

You can create unlimited sliders. Of course, each slider can have different settings and layers. If you create a new one you will see first the global settings page of this slider.

Global Settings

You can modify the global settings of each slider. You can set the width / height and other properties. For more information, please read the complete documentation of the script.

The WYSIWYG editor

We created an editor where you can easily upload your images (which can be sublayers), or you can add custom HTML codes. You can set the order and positions of the sublayers too by dragging them to anywhere inside the layer. You can set almost every settings with simple point and click.

Creating layers (slides)

To create a new layer, click on Add New Layer button.

A new box will appear with some inputs and select boxes. To add a background to this layer, click into the input of the Background. In the popup window you can upload your picture, or you can browse the previously uploaded pictures on the Media Library tab. Choose a picture, scroll down and click on the Insert into Post button.
The selected picture will appear as the background of the current layer.

After that you can edit the settings of the layer for example SlideDirection, Durations, etc.

Creating sublayers

You will notice, that there is an empty sublayer also. You can change the type of the sublayer. It can be image or some other pre-defined HTML elements, like div, p, span and heading tags. If you want to add a custom HTML element, select div, and type your own html code into the HTML input. You add custom CSS styles to HTML elements by adding them to Style input like in CSS, for example: width: 300px; color: #fff; ...

If you choose image as a type of sublayer, click into the input of Image and upload an image or choose it from Media Library. After that you can add a link to this sublayer if you want. You can set the target of the link of course.

As you can see, there are many settings available for sublayers. The most of them are self-evident, but you can find all in the complete documentation except one, this is P.level.

P.level means Parallax Level and it is a positive integer. The script uses this number to show Parallax Effect correctly. Sublayers with higher number will be animating from farther - seems like animating faster - and sublayers with lower number will animating slower. If you want to create a realistic effect, try to increase this number by two per sublayer. For example: 2, 4, 6 ,8 ...

You can create as many sublayers you want by clicking the Add New Sublayer button.

Setting the orders and the positions of layers and sublayers

You can set the position of a sublayer by setting the value of the left and top input fields. You can set their position also by dragging them. To do this, select the sublayer by clicking the first checkbox of the row. You'll notice, that all other sublayers will be semi-transparent. Now you can drag and move the selected sublayer to the required position. If you want to change the order of the layers, grab the whole row with this handler and drag it up or down.

Of course you can remove layers, sublayers or sliders too.

IMPORTANT: Don't forget to click on the Save Changes button if you are ready with the settings!

Advanced options of sublayers

We hide some of the sublayer options which you don't need often. You can display these options by clicking the Show Advanced Options button.

Naming and reordering layers

You can add a name to any layer and you can reorder them by clicking the Reorder Layers button. Don't forget to Save Changes after you finish reordering.

How to add a link which jumps to another layer (linkTo)

From version 2.0 you can easily add a special link to any sublayer which jumps to the selected layer of the slider. You don't have to write any JS code, just specify the ordinary number of the layer and write into the Link field by the following way:

#3 - which means, LayerSlider WP will jump to the third layer if you click on this sublayer.

Embedding Videos (YouTube and Vimeo)

We want to show an example how to create a layer with an embedded video sublayer. LayerSlider WP works with embed codes of many video sharing websites, but we created some features to improve the work with two most popular sites: YouTube and Vimeo.

So, how to put your video into a layer?

It is very simple: you will need to create a DIV sublayer and put your video embed code into the HTML field of this sublayer. That's it!

Using the LayerSlider Widget

Drag & Drop the Widget to the area of your theme where you want this should be placed.

Using the LayerSlider Shortcode

You can use a shortcode too to display a LayerSlider widget in any page or post.

						[layerslider id="1" title="LayerSlider"]

The id is the number of the slider. (You can find this number in the title of each slider tab at the admin page.) The title parameter is optional.

Inserting LayerSlider into a Theme

You can insert LayerSlider into a Theme by the following way:

						<?= do_shortcode('[layerslider id="1"]'); ?>

If you want to define a new widget area, follow the instructions here: http://codex.wordpress.org/Widgetizing_Themes

Import or export your settings

To export your current settings and import them to your another site, do the following:

• Click on the Import / Export Settings button to show the settings panel.
• You can see your current settings (coded with base64) in Export settings field.
• Select and copy the whole string to your clipboard.
• Open LayerSlider WP Admin Page on your new site and paste the code into the Import settings field.
• Click on the Import button below.

IMPORTANT: You can export / import only your settings with this method and you have to upload all your images (which are used in your slider) to you new site. Or you can move your whole uploads folder (from wp-content) with all of your images via FTP to your new site.

Contact us!

If you like our works.
If you need a help in using one of our CodeCanyon items.
If you have a great idea which we can work together.